<div class="header-bottom">
    <div class="container">
        <div class="row">
            <div class="sidebar-menu col-md-3 col-sm-6 col-xs-12 ">
                <div class="responsive so-megamenu ">
                    <div class="so-vertical-menu no-gutter compact-hidden">
                        <nav class="navbar-default">
                            <div class="container-megamenu vertical open">
                                <div id="menuHeading">
                                    <div class="megamenuToogle-wrapper">
                                        <div class="megamenuToogle-pattern">
                                            <div class="container">
                                                <div>
                                                    <span></span>
                                                    <span></span>
                                                    <span></span>
                                                </div>
                                                分类
                                                <i class="fa pull-right arrow-circle fa-chevron-circle-up"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="navbar-header">
                                    <button type="button" id="show-verticalmenu" data-toggle="collapse" class="navbar-toggle fa fa-list-alt"></button>
                                    All Categories
                                </div>
                                <div class="vertical-wrapper" >
                                    <span id="remove-verticalmenu" class="fa fa-times"></span>
                                    <div class="megamenu-pattern">
                                        <div class="container">
                                            <ul class="megamenu">
                                                <@category>
                                                    <#list navbar as item>
                                                        <li class="item-vertical style1 with-sub-menu hover">
                                                            <p class="close-menu"></p>
                                                            <a href="#" class="clearfix">
                                                                <img src="${item.iconUrl!}" alt="icon">
                                                                <span>${item.name!}</span>
                                                                <b class="caret"></b>
                                                            </a>
                                                            <#if item.children?? && (item.children?size>0)>
                                                                <div class="sub-menu" data-subwidth="100" >
                                                                    <div class="content" >
                                                                        <div class="row">
                                                                            <div class="col-sm-12">
                                                                                <div class="row">
                                                                                    <#list item.children as itemTye>
                                                                                        <div class="col-md-4 static-menu">
                                                                                            <div class="menu">
                                                                                                <ul>
                                                                                                    <li>
                                                                                                        <a href="#"  class="main-menu">${itemTye.name!}</a>
                                                                                                        <ul>
                                                                                                            <#list itemTye.children as c3>
                                                                                                                <li><a href="${basepath}/category/${c3.code!}" >${c3.name!}</a></li>
                                                                                                            </#list>
                                                                                                        </ul>
                                                                                                    </li>
                                                                                                </ul>
                                                                                            </div>
                                                                                        </div>
                                                                                    </#list>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </#if>
                                                        </li>
                                                    </#list>
                                                </@category>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>

            <!-- Main menu -->
            <div class="megamenu-hori header-bottom-right  col-md-9 col-sm-6 col-xs-12 ">
                <div class="responsive so-megamenu ">
                    <nav class="navbar-default">
                        <div class=" container-megamenu  horizontal">
                            <div class="navbar-header">
                                <button type="button" id="show-megamenu" data-toggle="collapse" class="navbar-toggle">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                Navigation
                            </div>

                            <div class="megamenu-wrapper">
                                <span id="remove-megamenu" class="fa fa-times"></span>
                                <div class="megamenu-pattern">
                                    <div class="container">
                                        <ul class="megamenu " data-transition="slide" data-animationtime="250">
                                            <li class="home hover">

                                                <a href="index.html">Home <b class="caret"></b></a>
                                                <div class="sub-menu" style="width:100%;" >
                                                    <div class="content" >
                                                        <div class="row">
                                                            <div class="col-md-3">
                                                                <a href="index.html" class="image-link">
													<span class="thumbnail">
														<img class="img-responsive img-border" src="${basepath}/image/demo/feature/home-1.jpg" alt="">
														<span class="btn btn-default">Read More</span>
													</span>
                                                                    <h3 class="figcaption">Home page - (Default)</h3>
                                                                </a>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <a href="#" class="image-link">
													<span class="thumbnail">
														<img class="img-responsive img-border" src="${basepath}/image/demo/feature/home-2.jpg" alt="">
														<span class="btn btn-default">Read More</span>
													</span>
                                                                    <h3 class="figcaption">Home page - Layout 2</h3>
                                                                </a>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <a href="#" class="image-link">
													<span class="thumbnail">
														<img class="img-responsive img-border" src="${basepath}/image/demo/feature/home-3.jpg" alt="">
														<span class="btn btn-default">Read More</span>
													</span>
                                                                    <h3 class="figcaption">Home page - Layout 3</h3>
                                                                </a>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <a href="#" class="image-link">
													<span class="thumbnail">
														<img class="img-responsive img-border" src="${basepath}/image/demo/feature/home-4.jpg" alt="">
														<span class="btn btn-default">Read More</span>
													</span>
                                                                    <h3 class="figcaption">Home page - Layout 4</h3>
                                                                </a>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="with-sub-menu hover">
                                                <p class="close-menu"></p>
                                                <a href="#" class="clearfix">
                                                    <strong>Features</strong>
                                                    <span class="label"> Hot</span>
                                                    <b class="caret"></b>
                                                </a>
                                                <div class="sub-menu" style="width: 100%; right: auto;">
                                                    <div class="content" >
                                                        <div class="row">
                                                            <div class="col-md-3">
                                                                <div class="column">
                                                                    <a href="#" class="title-submenu">Listing pages</a>
                                                                    <div>
                                                                        <ul class="row-list">
                                                                            <li><a href="category.html">Category Page 1 </a></li>
                                                                            <li><a href="#">Category Page 2</a></li>
                                                                            <li><a href="#">Category Page 3</a></li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <div class="column">
                                                                    <a href="#" class="title-submenu">Product pages</a>
                                                                    <div>
                                                                        <ul class="row-list">
                                                                            <li><a href="product.html">Image size - big</a></li>
                                                                            <li><a href="#">Image size - medium</a></li>
                                                                            <li><a href="#">Image size - small</a></li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <div class="column">
                                                                    <a href="#" class="title-submenu">Shopping pages</a>
                                                                    <div>
                                                                        <ul class="row-list">
                                                                            <li><a href="#">Shopping Cart Page</a></li>
                                                                            <li><a href="#">Checkout Page</a></li>
                                                                            <li><a href="#">Compare Page</a></li>
                                                                            <li><a href="#">Wishlist Page</a></li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <div class="column">
                                                                    <a href="#" class="title-submenu">My Account pages</a>
                                                                    <div>
                                                                        <ul class="row-list">
                                                                            <li><a href="login.html">Login Page</a></li>
                                                                            <li><a href="register.html">Register Page</a></li>
                                                                            <li><a href="#">My Account</a></li>
                                                                            <li><a href="#">Order History</a></li>
                                                                            <li><a href="#">Order Information</a></li>
                                                                            <li><a href="#">Product Returns</a></li>
                                                                            <li><a href="#">Gift Voucher</a></li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="with-sub-menu hover">
                                                <p class="close-menu"></p>
                                                <a href="#" class="clearfix">
                                                    <strong>Pages</strong>
                                                    <span class="label"> Hot</span>
                                                    <b class="caret"></b>
                                                </a>
                                                <div class="sub-menu" style="width: 40%; ">
                                                    <div class="content" >
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <ul class="row-list">
                                                                    <li><a class="subcategory_item" href="#">FAQ</a></li>
                                                                    <li><a class="subcategory_item" href="#">Typography</a></li>
                                                                    <li><a class="subcategory_item" href="#">Site Map</a></li>
                                                                    <li><a class="subcategory_item" href="#">Contact us</a></li>
                                                                    <li><a class="subcategory_item" href="#">Banner Effect</a></li>
                                                                </ul>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <ul class="row-list">
                                                                    <li><a class="subcategory_item" href="#">About Us 1</a></li>
                                                                    <li><a class="subcategory_item" href="#">About Us 2</a></li>
                                                                    <li><a class="subcategory_item" href="#">About Us 3</a></li>
                                                                    <li><a class="subcategory_item" href="#">About Us 4</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="with-sub-menu hover">
                                                <p class="close-menu"></p>
                                                <a href="#" class="clearfix">
                                                    <strong>Categories</strong>
                                                    <span class="label"></span>
                                                    <b class="caret"></b>
                                                </a>
                                                <div class="sub-menu" style="width: 100%; display: none;">
                                                    <div class="content">
                                                        <div class="row">
                                                            <div class="col-sm-12">
                                                                <div class="row">
                                                                    <div class="col-md-3 img img1">
                                                                        <a href="#"><img src="${basepath}/image/demo/cms/img1.jpg" alt="banner1"></a>
                                                                    </div>
                                                                    <div class="col-md-3 img img2">
                                                                        <a href="#"><img src="${basepath}/image/demo/cms/img2.jpg" alt="banner2"></a>
                                                                    </div>
                                                                    <div class="col-md-3 img img3">
                                                                        <a href="#"><img src="${basepath}/image/demo/cms/img3.jpg" alt="banner3"></a>
                                                                    </div>
                                                                    <div class="col-md-3 img img4">
                                                                        <a href="#"><img src="${basepath}/image/demo/cms/img4.jpg" alt="banner4"></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-3">
                                                                <a href="#" class="title-submenu">Automotive</a>
                                                                <div class="row">
                                                                    <div class="col-md-12 hover-menu">
                                                                        <div class="menu">
                                                                            <ul>
                                                                                <li><a href="#"  class="main-menu">Car Alarms and Security</a></li>
                                                                                <li><a href="#"  class="main-menu">Car Audio &amp; Speakers</a></li>
                                                                                <li><a href="#"  class="main-menu">Gadgets &amp; Auto Parts</a></li>
                                                                                <li><a href="#"  class="main-menu">More Car Accessories</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <a href="#" class="title-submenu">Electronics</a>
                                                                <div class="row">
                                                                    <div class="col-md-12 hover-menu">
                                                                        <div class="menu">
                                                                            <ul>
                                                                                <li><a href="#"  class="main-menu">Battereries &amp; Chargers</a></li>
                                                                                <li><a href="#"  class="main-menu">Headphones, Headsets</a></li>
                                                                                <li><a href="#"  class="main-menu">Home Audio</a></li>
                                                                                <li><a href="#"  class="main-menu">Mp3 Players &amp; Accessories</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <a href="#" class="title-submenu">Jewelry &amp; Watches</a>
                                                                <div class="row">
                                                                    <div class="col-md-12 hover-menu">
                                                                        <div class="menu">
                                                                            <ul>
                                                                                <li><a href="#"  class="main-menu">Earings</a></li>
                                                                                <li><a href="#"  class="main-menu">Wedding Rings</a></li>
                                                                                <li><a href="#"  class="main-menu">Men Watches</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <a href="#" class="title-submenu">Bags, Holiday Supplies</a>
                                                                <div class="row">
                                                                    <div class="col-md-12 hover-menu">
                                                                        <div class="menu">
                                                                            <ul>
                                                                                <li><a href="#"  class="main-menu">Gift &amp; Lifestyle Gadgets</a></li>
                                                                                <li><a href="#"  class="main-menu">Gift for Man</a></li>
                                                                                <li><a href="#"  class="main-menu">Gift for Woman</a></li>
                                                                                <li><a href="#"  class="main-menu">Lighter &amp; Cigar Supplies</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="with-sub-menu hover">
                                                <p class="close-menu"></p>
                                                <a href="#" class="clearfix">
                                                    <strong>Accessories</strong>
                                                    <b class="caret"></b>
                                                </a>
                                                <div class="sub-menu" style="width: 100%; display: none;">
                                                    <div class="content" style="display: none;">
                                                        <div class="row">
                                                            <div class="col-md-8">
                                                                <div class="row">
                                                                    <div class="col-md-6 static-menu">
                                                                        <div class="menu">
                                                                            <ul>
                                                                                <li>
                                                                                    <a href="#"  class="main-menu">Automotive</a>
                                                                                    <ul>
                                                                                        <li><a href="#">Car Alarms and Security</a></li>
                                                                                        <li><a href="#" >Car Audio &amp; Speakers</a></li>
                                                                                        <li><a href="#" >Gadgets &amp; Auto Parts</a></li>
                                                                                    </ul>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#"  class="main-menu">Smartphone &amp; Tablets</a>
                                                                                    <ul>
                                                                                        <li><a href="#" >Accessories for i Pad</a></li>
                                                                                        <li><a href="#" >Apparel</a></li>
                                                                                        <li><a href="#" >Accessories for iPhone</a></li>
                                                                                    </ul>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6 static-menu">
                                                                        <div class="menu">
                                                                            <ul>
                                                                                <li>
                                                                                    <a href="#" class="main-menu">Sports &amp; Outdoors</a>
                                                                                    <ul>
                                                                                        <li><a href="#" >Camping &amp; Hiking</a></li>
                                                                                        <li><a href="#" >Cameras &amp; Photo</a></li>
                                                                                        <li><a href="#" >Cables &amp; Connectors</a></li>
                                                                                    </ul>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#"  class="main-menu">Electronics</a>
                                                                                    <ul>
                                                                                        <li><a href="#" >Battereries &amp; Chargers</a></li>
                                                                                        <li><a href="#" >Bath &amp; Body</a></li>
                                                                                        <li><a href="#" >Outdoor &amp; Traveling</a></li>
                                                                                    </ul>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <span class="title-submenu">Bestseller</span>
                                                                <div class="col-sm-12 list-product">
                                                                    <div class="product-thumb">
                                                                        <div class="image pull-left">
                                                                            <a href="#"><img src="${basepath}/image/demo/shop/product/35.jpg" width="80" alt="Filet Mign" title="Filet Mign" class="img-responsive"></a>
                                                                        </div>
                                                                        <div class="caption">
                                                                            <h4><a href="#">Filet Mign</a></h4>
                                                                            <div class="rating-box">
                                                                                <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                                <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                                <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                                <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                                <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                            </div>
                                                                            <p class="price">$1,202.00</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-12 list-product">
                                                                    <div class="product-thumb">
                                                                        <div class="image pull-left">
                                                                            <a href="#"><img src="${basepath}/image/demo/shop/product/W1.jpg" width="80" alt="Dail Lulpa" title="Dail Lulpa" class="img-responsive"></a>
                                                                        </div>
                                                                        <div class="caption">
                                                                            <h4><a href="#">Dail Lulpa</a></h4>
                                                                            <div class="rating-box">
                                                                                <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                                <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                                <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                                <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                            </div>
                                                                            <p class="price">$78.00</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-12 list-product">
                                                                    <div class="product-thumb">
                                                                        <div class="image pull-left">
                                                                            <a href="#"><img src="${basepath}/image/demo/shop/product/141.jpg" width="80" alt="Canon EOS 5D" title="Canon EOS 5D" class="img-responsive"></a>
                                                                        </div>
                                                                        <div class="caption">
                                                                            <h4><a href="#">Canon EOS 5D</a></h4>
                                                                            <div class="rating-box">
                                                                                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>
                                                                            </div>
                                                                            <p class="price">
                                                                                <span class="price-new">$60.00</span>
                                                                                <span class="price-old">$145.00</span>
                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="">
                                                <p class="close-menu"></p>
                                                <a href="#" class="clearfix">
                                                    <strong>Blog</strong>
                                                    <span class="label"></span>
                                                </a>
                                            </li>
                                            <li class="hidden-md">
                                                <p class="close-menu"></p>
                                                <a href="#" class="clearfix">
                                                    <strong>Buy Theme!</strong>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
            <!-- //end Main menu -->
        </div>
    </div>
</div>
